এসভিজি (SVG) ফাইলগুলি ওয়েব ডিজাইনে স্ট্যাটিক গ্রাফিক্স তৈরি করতে ব্যবহৃত হলেও, CSS ট্রানজিশন এবং এসভিজি অ্যানিমেশন ব্যবহার করে আপনি এসব গ্রাফিক্সকে আরও ডায়নামিক এবং ইন্টারঅ্যাকটিভ করতে পারেন। CSS ট্রানজিশন এবং এসভিজি অ্যানিমেশন গ্রাফিক্সের মধ্যে মসৃণ পরিবর্তন এবং অ্যানিমেশন তৈরি করতে সাহায্য করে, যা ওয়েব পেজের ইউজার এক্সপিরিয়েন্স (UX) উন্নত করে।
এখানে আমরা আলোচনা করব কীভাবে CSS Transitions এবং SVG Animation ব্যবহার করে এসভিজি গ্রাফিক্সে অ্যানিমেশন যোগ করা যায়।
১. CSS Transitions এবং SVG Elements
CSS Transitions হল একটি সহজ উপায় যার মাধ্যমে আপনি এসভিজি উপাদানের গুণগত পরিবর্তনগুলিকে মসৃণভাবে প্রদর্শন করতে পারেন। CSS ট্রানজিশন ব্যবহার করে, আপনি কোনো উপাদানের স্টাইল বা বৈশিষ্ট্য পরিবর্তন করতে পারেন, যেমন রঙ, আকার বা অবস্থান, এবং তা মসৃণভাবে হবে।
উদাহরণ: CSS Transition দিয়ে SVG রঙ পরিবর্তন
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="4" fill="blue" class="hover-effect" />
</svg>
<style>
.hover-effect {
transition: fill 0.5s ease; /* Smooth transition for color change */
}
.hover-effect:hover {
fill: red; /* Hover effect to change color */
}
</style>
ব্যাখ্যা:
transition: fill 0.5s ease;এর মাধ্যমে বৃত্তটির রঙ পরিবর্তনকে 0.5 সেকেন্ডে মসৃণভাবে পরিবর্তিত করা হচ্ছে।:hoverপসুডোক্লাস ব্যবহার করে বৃত্তের রঙ হোভার করার পর নীল থেকে লাল হবে।
২. CSS Transitions দিয়ে SVG Scaling
CSS ট্রানজিশন ব্যবহার করে আপনি এসভিজি উপাদানের আকার পরিবর্তন করতে পারেন। এটি মসৃণভাবে উপাদানের আকার পরিবর্তন করার জন্য ব্যবহার করা হয়।
উদাহরণ: CSS Transition দিয়ে SVG Scaling
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="4" fill="green" class="scale-effect" />
</svg>
<style>
.scale-effect {
transition: transform 0.5s ease; /* Smooth transition for scaling */
}
.scale-effect:hover {
transform: scale(1.5); /* Scale up the circle when hovered */
}
</style>
ব্যাখ্যা:
transition: transform 0.5s ease;ব্যবহার করে বৃত্তের আকার পরিবর্তন 0.5 সেকেন্ডে মসৃণভাবে হবে।:hoverপসুডোক্লাসের মাধ্যমে বৃত্তটির আকার 1.5x বৃদ্ধি পাবে যখন ইউজার হোভার করবে।
৩. SVG Animation with CSS
SVG অ্যানিমেশন CSS এর মাধ্যমে করা সম্ভব। CSS অ্যানিমেশন ব্যবহার করে আপনি এসভিজি উপাদানের মধ্যে ডায়নামিক পরিবর্তন করতে পারেন, যেমন রঙ পরিবর্তন, অবস্থান পরিবর্তন, আকার বৃদ্ধি ইত্যাদি।
উদাহরণ: CSS Animation দিয়ে SVG Circle এর আকার পরিবর্তন
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="4" fill="yellow" class="animate-circle" />
</svg>
<style>
.animate-circle {
animation: expand 2s infinite alternate; /* Animation for expanding and contracting */
}
@keyframes expand {
0% {
r: 50; /* Initial radius */
}
50% {
r: 100; /* Increased radius */
}
100% {
r: 50; /* Back to initial radius */
}
}
</style>
ব্যাখ্যা:
@keyframes expandএর মাধ্যমে বৃত্তের রেডিয়াস (radius) পরিবর্তন করা হয়েছে, যেখানে বৃত্তটি প্রথমে ৫০ পিক্সেল থেকে ১০০ পিক্সেলে বৃদ্ধি পায় এবং পরে আবার ৫০ পিক্সেলে ফিরে আসে।animation: expand 2s infinite alternate;এর মাধ্যমে অ্যানিমেশনটি ২ সেকেন্ডে সম্পন্ন হবে এবং বারবার চলতে থাকবে (infinite)।
৪. JavaScript এর মাধ্যমে SVG Animation
JavaScript ব্যবহার করে আপনি এসভিজি উপাদানগুলির মধ্যে আরো কাস্টম অ্যানিমেশন তৈরি করতে পারেন। JavaScript এর মাধ্যমে আপনি চিত্রের গুণগত পরিবর্তন করতে পারেন এবং এর মধ্যে ডায়নামিক কার্যক্রম যেমন সময়সীমা নির্ধারণ, বিভিন্ন অবস্থা ট্র্যাকিং ইত্যাদি যোগ করতে পারেন।
উদাহরণ: JavaScript দিয়ে SVG Circle অ্যানিমেশন
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle id="myCircle" cx="50" cy="100" r="50" stroke="black" stroke-width="4" fill="orange" />
</svg>
<script>
var circle = document.getElementById("myCircle");
var x = 50;
var y = 100;
function animateCircle() {
x += 2;
y += 2;
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
if (x < 200 && y < 200) {
requestAnimationFrame(animateCircle);
}
}
animateCircle();
</script>
ব্যাখ্যা:
- JavaScript এর
requestAnimationFrame()ব্যবহার করে বৃত্তটির cx এবং cy অ্যাট্রিবিউটগুলির মান পরিবর্তন করা হচ্ছে, ফলে এটি পটভূমির মধ্যে স্লো-মুভমেন্টে চলতে থাকে।
৫. SVG Path Animation with CSS
এসভিজি পাথ অ্যানিমেশন CSS এর মাধ্যমে অত্যন্ত জনপ্রিয়। পাথ অ্যানিমেশন ব্যবহার করে আপনি এসভিজি লাইনের মধ্যে মসৃণ গতিবিধি তৈরি করতে পারেন, যা ওয়েবসাইটে খুবই আকর্ষণীয়।
উদাহরণ: CSS Path Animation
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" stroke-width="2" class="path-animation" />
</svg>
<style>
.path-animation {
animation: drawPath 3s forwards;
}
@keyframes drawPath {
0% {
stroke-dasharray: 0, 400;
}
100% {
stroke-dasharray: 400, 0;
}
}
</style>
ব্যাখ্যা:
stroke-dasharrayব্যবহার করে পাথের রেখাটি অ্যানিমেট করা হয়েছে, যাতে এটি একে একে প্রদর্শিত হয়।@keyframes drawPathএর মাধ্যমে পাথের লাইনের অ্যানিমেশন করা হয়েছে, যা ৩ সেকেন্ডে সম্পন্ন হবে।
সারাংশ
এসভিজি (SVG) ফাইলগুলির মধ্যে CSS Transitions এবং CSS/JavaScript Animation ব্যবহার করে আপনি অনেক ধরনের ডায়নামিক গ্রাফিক্স এবং অ্যানিমেশন তৈরি করতে পারেন। CSS Transitions সাধারণত মসৃণ পরিবর্তন তৈরির জন্য ব্যবহৃত হয়, যেখানে SVG Animation এবং JavaScript Animation আরো কাস্টম এবং জটিল অ্যানিমেশন তৈরি করার জন্য উপযুক্ত। এর মাধ্যমে আপনি ওয়েবসাইটে আরো প্রাণবন্ত এবং ইন্টারঅ্যাকটিভ ইউজার এক্সপিরিয়েন্স তৈরি করতে পারেন।
Read more
